import React, { useState } from 'react';
import { Form, Row, Col, Input, Button, Space } from 'antd';
import './style.less';

type IFormItemType = {
  type: string | 'input';
  name: string;
  key: string;
  placeholder?: string;
  label?: string;
};

type IFormItemMapType = {
  [key: string]: (prop: any) => void;
};

const config = [
  {
    type: 'input',
    name: 'gameName',
    key: 'gameName',
    label: '游戏名',
  },
  {
    type: 'input',
    name: 'hostName',
    key: 'hostName',
    label: '主持人',
  },
];

const InputRender = (formItemConfig: IFormItemType) => {
  const { placeholder = '请输入' } = formItemConfig;
  return <Input placeholder={placeholder}></Input>;
};

const FormItemMap: IFormItemMapType = {
  input: InputRender,
};

const SearchRender = (props: any) => {
  const { action } = props;
  const [form] = Form.useForm();

  return (
    <div className="SearchRender">
      <Form form={form}>
        <Row>
          {config.map((item: IFormItemType, index) => {
            return (
              <Col key={index} span={6} offset={2}>
                {FormItemMap[item.type] && (
                  <Form.Item label={item.label}>
                    {FormItemMap[item.type](item)}
                  </Form.Item>
                )}
              </Col>
            );
          })}
        </Row>
        <Row className="action-box" justify="center">
          <Space size={8}>
            <Button type="primary">搜索</Button>
            <Button type="primary" onClick={action}>
              新建游戏
            </Button>
            <Button>重置</Button>
          </Space>
        </Row>
      </Form>
    </div>
  );
};

export default SearchRender;
